<template>
    <div class="login">
        <Particles id="tsparticles" class="login__particles" :options="options" />
        <div class="loginPart">
            <h2>用户登录</h2>
            <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" autocomplete="off" @finish="onFinish">
                <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '用户名不能为空' }]">
                    <a-input v-model:value="formState.username" placeholder="请输入用户名..." />
                </a-form-item>
                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '密码不能为空' }]">
                    <a-input-password v-model:value="formState.password" placeholder="请输入密码...." />
                </a-form-item>
                <a-form-item class="submit" :wrapper-col="{ offset: 10, span: 14 }">
                    <a-button type="primary" html-type="submit">登录</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { message } from 'ant-design-vue';
import type { UserForm } from '@/api/user/type.ts'
import userStorePinia from "@/store/modules/user";
import { useRouter,useRoute } from "vue-router";
let $router = useRouter()
let $route = useRoute()

let userStore = userStorePinia()
const formState = reactive<UserForm>({
    username: 'admin',
    password: '123456',
});
const onFinish = async () => {
    // 关闭message
    message.destroy()
    try {
        let result = await userStore.userLogin(formState)
        message.success(result);
        // 获取路由参数
        let redirect:any = $route.query.redirect
        $router.push({path:redirect||'/'})
    } catch (error) {
        message.error(error);
    }
};

const options = {
    fpsLimit: 60,
    interactivity: {
        detectsOn: "canvas",
        events: {
            onClick: {
                // 开启鼠标点击的效果
                enable: true,
                mode: "push",
            },
            onHover: {
                // 开启鼠标悬浮的效果(线条跟着鼠标移动)
                enable: true,
                mode: "grab",
            },
            resize: true,
        },
        modes: {
            // 配置动画效果
            bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
            },
            push: {
                quantity: 4,
            },
            grab: {
                distance: 200,
                duration: 0.4,
            },
            attract: {
                // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
                distance: 200,
                duration: 0.4,
                factor: 5,
            },
        },
    },
    particles: {
        color: {
            value: "#BA55D3", // 粒子点的颜色
        },
        links: {
            color: "#FFBBFF", // 线条颜色
            distance: 150, //线条距离
            enable: true,
            opacity: 0.4, // 不透明度
            width: 1.2, // 线条宽度
        },
        collisions: {
            enable: true,
        },
        move: {
            attract: { enable: false, rotateX: 600, rotateY: 1200 },
            bounce: false,
            direction: "none",
            enable: true,
            out_mode: "out",
            random: false,
            speed: 0.5, // 移动速度
            straight: false,
        },
        number: {
            density: {
                enable: true,
                value_area: 800,
            },
            value: 80, //粒子数
        },
        opacity: {
            //粒子透明度
            value: 0.7,
        },
        shape: {
            //粒子样式
            type: "star",
        },
        size: {
            //粒子大小
            random: true,
            value: 3,
        },
    },
    detectRetina: true,
};
</script>

<style lang="scss" scoped>
.login {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .login__particles {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("@/assets/images/login_bgc.png");
        opacity: 0.9;
        position: fixed;
        pointer-events: none;
    }

    .loginPart {
        position: fixed;
        top: 55%;
        left: 80%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 20px 50px 30px 50px;
        background: rgba(255, 204, 255, 0.3);
        box-sizing: border-box;
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
        border-radius: 15px;

        h2 {
            margin: 30px 0;
            padding: 0;
            color: #fff;
            text-align: center;
        }

        .submit {
            margin-top: 40px;
        }
    }

}
</style>